<template>
	<view class="personal">
		<scroll-view scroll-y="true" show-scrollbar="false">
			<view>
				<view class="avatarbox">
						<view class="imgbox">
							<view class="avatar" @tap="selectImg"><image :src="getUser.avatars" mode="aspectFill"></image></view>
							<view class="info">{{ getUser.name }}</view>
						</view>
						<view class="bg-img"><image :src="getUser.avatars" mode="aspectFill"></image></view>
						<view class="mask"></view> 
					</view>
					<view class="infobox">
						<view class="info-item" @tap="changeName">
							<text class="left iconfont icon-icon_tabicon_wode_12x"></text>
							<text class="text">{{ getUser.name }}</text>
							<text class="right iconfont icon-icon_jiantougengduo2x"></text>
						</view>
						<view class="info-item" @tap="signature">
							<text class="left iconfont icon-icon_bianji2x"></text>
							<text class="text">{{ getUser.signature == '' ? '编辑个签，展示我的独特态度' : getUser.signature }}</text>
							<text class="right iconfont icon-icon_jiantougengduo2x"></text>
						</view>
						<view class="info-item">
							<text class="left iconfont icon-youxiang"></text>
							<text class="text">{{ getUser.email }}</text>
							<text class="right"></text>
						</view>
						<view class="info-item" @tap="region = true">
							<text class="left iconfont icon-icon_shouhuodizhi2x"></text>
							<text class="text">{{ getUser.address }}</text>
							<text class="right iconfont icon-icon_jiantougengduo2x"></text>
						</view>
						<view class="info-item" @tap="visible = true">
							<text class="left iconfont icon-riqiqishu"></text>
							<text class="text">{{ getUser.birthday }}</text>
							<text class="right iconfont icon-icon_jiantougengduo2x"></text>
						</view>
						<view class="info-item" @tap="sex = true">
							<text class="left iconfont icon-xingbiecopy"></text>
							<text class="text">{{ getUser.sex }}</text>
							<text class="right iconfont icon-icon_jiantougengduo2x"></text>
						</view>
						<view class="info-item" @tap="changePwd">
							<text class="left iconfont icon-mima1"></text>
							<text class="text">*********</text>
							<text class="right iconfont icon-icon_jiantougengduo2x"></text>
						</view>
						<view class="exit"><view class="exit_btn" @tap="exit">退出</view></view>
						<!-- 选择时间 -->
						<w-picker
							:visible.sync="visible"
							mode="date"
							startYear="1900"
							endYear="2029"
							value="2020-03-07"
							:current="true"
							fields="day"
							@confirm="onConfirm($event, 'birthday')"
							@cancel="onCancel"
							:disabled-after="true"
							ref="date"
						></w-picker>
						<!-- 选择地区 -->
						<w-picker
							:visible.sync="region"
							mode="region"
							:value="defaultRegion"
							default-type="value"
							:hide-area="false"
							@confirm="onRegion($event, 'address')"
							@cancel="CancelRegion"
							ref="region"
						></w-picker>
						<!-- 选择性别 -->
						<w-picker
							:visible.sync="sex"
							mode="selector"
							value="女"
							default-type="name"
							:default-props="defaultProps"
							:options="selectorList"
							@confirm="onSex($event, 'sex')"
							@cancel="cancelSex"
							ref="selector"
						></w-picker>
						<ygc-comment ref="ygcComment" :placeholder="'输入你的签名'" @pubComment="pubComment"></ygc-comment>
						<!-- 自定义修改用户名和密码的组件 -->
						<modify-input :visible.sync="showinput" :model="model" @pubComment="userPwd"></modify-input>
					</view>
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
import request from '../../api/request.js';
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			visible: false,
			region: false,
			birthday: '',
			defaultRegion: ['广东省', '深圳市', '宝安区'],
			sex: false,
			selectorList: [{ name: '男' }, { name: '女' }],
			defaultProps: { label: 'name' },
			showinput: false,
			model: 'user'
		};
	},
	onLoad() {
		this.$store.dispatch("getUserInfo")
	},
	onShow() {
		let token = uni.getStorageSync('token');
		if (!token) {
			console.log('我执行了');
			uni.navigateTo({
				url: '../signin/signin'
			});
		}
	},
	computed:{
		...mapGetters(["getUser"])
	},
	methods: {
		// 关于选择时间触发的事件
		onCancel() {
			this.visible = false;
		},
		async onConfirm(event, str) {
			this.modify(event.result, str);
		},

		// 关于选择地区触发的事件
		onRegion(event, str) {
			this.modify(event.result, str);
		},
		CancelRegion() {
			this.region = false;
		},

		// 关于选择性别触发的事件
		onSex(event, str) {
			this.modify(event.result, str);
		},
		cancelSex() {
			this.sex = false;
		},

		// 关于修改签名触发的事件
		signature() {
			this.$refs.ygcComment.toggleMask('show');
		},
		async pubComment(content) {
			let res = await this.modify(content, 'signature');
			if (res) {
				this.$refs.ygcComment.toggleMask();
			}
		},

		// 修改用户名和密码触发的事件
		changeName() {
			this.showinput = true;
			this.model = 'name';
		},
		changePwd() {
			this.showinput = true;
			this.model = 'pwd';
		},
		async userPwd(data) {
			if (this.model == 'name') {
				this.modify(data, 'name');
			}
			if (this.model == 'pwd') {
				let res = await this.modify(data, 'signature');
				if (res) {
					this.showinput = false;
				}
			}
		},
		// 发送请求修改数据
		async modify(value, type) {
			let result = await request({
				url: '/user/modify',
				data: {
					token: uni.getStorageSync('token'),
					value,
					type
				},
				method: 'POST'
			});
			let res = result[1].data;
			if (res.status) {
				uni.showToast({
					title: res.msg,
					duration: 3000
				});
				this.$store.dispatch("getUserInfo")
				return true;
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 3000
				});
				return false;
			}
		},

		// 上传图片
		selectImg() {
			uni.chooseImage({
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					const uploadTask = uni.uploadFile({
						url: 'http://localhost:3000/upload/user', //仅为示例，非真实的接口地址
						// url: 'http://www.yemengs.cn/upload/user', //仅为示例，非真实的接口地址
						filePath: tempFilePaths[0],
						name: 'file',
						formData: {
							token: uni.getStorageSync('token'),
							savePath: 'avatars'
						},
						success: uploadFileRes => {
							let data = JSON.parse(uploadFileRes.data);
							if (data.status) {
								uni.showToast({
									title: data.msg,
									duration: 3000
								});
								this.$store.dispatch("getUserInfo")
							}
						}
					});
					uploadTask.onProgressUpdate(res => {
						// console.log('上传进度' + res.progress);
						// console.log('已经上传的数据长度' + res.totalBytesSent);
						// console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
					});
				}
			});
		},
		// 退出账号
		exit() {
			uni.removeStorageSync('token');
			uni.reLaunch({
				url: '../signin/signin'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.personal {
	height: 100vh;
	width: 100vw;
	scroll-view{
		height: 100%;
	}
	.avatarbox {
		background: white;
		height: 35vh;
		position: relative;
		overflow: hidden;
		.imgbox {
			position: absolute;
			z-index: 3;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			.avatar {
				border-radius: 50%;
				width: 200rpx;
				height: 200rpx;
				overflow: hidden;
				margin: 10rpx;
				border: 4rpx solid white;
				position: relative;
				image {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translateX(-50%) translateY(-50%);
				}
			}
			.info {
				color: white;
				text-align: center;
				margin-top: 20rpx;
			}
		}

		.bg-img {
			position: absolute;
			z-index: 0;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			image {
				width: 100vw;
				height: 35vh;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
			}
		}
		.mask {
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background: rgba(0, 0, 0, 0.1);
		}
	}
	.infobox {
		padding-top: 40rpx;
		width: 100%;
		.info-item {
			display: flex;
			margin: 0rpx 30rpx;
			height: 100rpx;
			line-height: 100rpx;
			color: $uni-text-color-grey;
			font-size: 32rpx;
			.left {
				flex: 1;
			}
			.text {
				flex: 8;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.right {
				flex: 1;
				text-align: right;
			}
		}
	}
	.exit {
		text-align: center;
		height: 88rpx;
		padding-bottom: 10rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.exit_btn {
			width: 90%;
			background: #cc4b4b;
			padding: 10rpx;
			color: white;
			border-radius: 10rpx;
		}
	}
}
</style>
